<template>
	<view class="kaoqin-container">
		<view class="kaoqin-box">
			<view class="title">考勤二维码</view>
			<view class="qrcode-wrapper">
				<image v-if="qrCodeUrl" :src="qrCodeUrl" mode="aspectFit" class="qrcode-image"></image>
				<view v-else class="loading">
					<uni-icons type="spinner-cycle" size="24" color="#409EFF"></uni-icons>
					<text>生成中...</text>
				</view>
			</view>
			<view class="date-info">
				<text class="date-text">生成日期：{{ currentDate }}</text>
			</view>
		</view>
	</view>
</template>

<script>
import { generateFamaQRCode } from '@/api/info'
	export default {
		data() {
			return {
				qrCodeUrl: '',
				currentDate: ''
			}
		},
		onLoad() {
			this.currentDate = new Date().toISOString().split('T')[0]
			this.generateQRCode()
		},
		methods: {
			generateQRCode() {
			const qrContent = JSON.stringify({
					type: 'kaoqin',
					timestamp: this.currentDate
			})
			generateFamaQRCode({ content: qrContent }).then(res => {
				if (res.code === 200 && res.url) {
					this.qrCodeUrl = res.url
						} else {
					uni.showToast({ title: '生成二维码失败', icon: 'none' })
						}
			}).catch(err => {
						console.error('生成二维码失败：', err)
				uni.showToast({ title: '生成二维码失败', icon: 'none' })
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
.kaoqin-container {
	min-height: 100vh;
	background-color: #f5f7fa;
	padding: 30rpx;
	display: flex;
	align-items: center;
	justify-content: center;
}

.kaoqin-box {
	background: #fff;
	border-radius: 20rpx;
	padding: 40rpx;
	width: 80%;
	box-shadow: 0 4rpx 20rpx rgba(0,0,0,0.05);
	text-align: center;
	
	.title {
		font-size: 36rpx;
		color: #333;
		font-weight: bold;
		margin-bottom: 40rpx;
	}
	
	.qrcode-wrapper {
		width: 400rpx;
		height: 400rpx;
		margin: 0 auto;
		background: #fff;
		padding: 20rpx;
		border-radius: 12rpx;
		box-shadow: 0 2rpx 10rpx rgba(0,0,0,0.05);
		
		.qrcode-image {
			width: 100%;
			height: 100%;
		}
		
		.loading {
			width: 100%;
			height: 100%;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			color: #909399;
			font-size: 28rpx;
			
			.uni-icons {
				margin-bottom: 20rpx;
			}
		}
	}

	.date-info {
		margin-top: 30rpx;
		
		.date-text {
			font-size: 28rpx;
			color: #666;
		}
	}
}
</style>
